<template>
<div class="order">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">课程</el-breadcrumb-item>
    <el-breadcrumb-item>课程简介</el-breadcrumb-item>
    <el-breadcrumb-item>课程购买</el-breadcrumb-item>
    <el-breadcrumb-item>订单详情</el-breadcrumb-item>
  </el-breadcrumb>
  <el-descriptions class="margin-top" title="订单信息" :column="1"  border
                   style=" position: relative;width: 70%;left: 15%;top: 10px">
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
      {{user.username}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
{{user.phone}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        课程名称
      </template>
      {{course.coursename}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        订单编号
      </template>
     {{order.dealnumber}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        下单时间
      </template>

<!--{{new Date(+new Date(new Date(order.createtime).toJSON()) + 8 * 3600 * 1000).toLocaleDateString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}-->
{{order.createtime}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        商品总金额
      </template>
      ￥{{order.price}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        商品优惠
      </template>
      <b>-</b>￥0.00
    </el-descriptions-item>
  </el-descriptions><br>
  <div class="order2">
    <span style="font-size: 15px"><b>实付款：</b></span><span style="color: #888888;font-size: 25px;">￥</span>
    <span style="color: red;font-size: 25px;">{{order.price}}</span>
    <br><br>
    <div class="pay" @click="open2();submit();back()">
      提交订单
    </div>
    <div class="return" @click="back">
      <i class="el-icon-top-left" ></i>
      返回课程&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "order",
  data(){
    return{
      user:[],
      order:[],
      course:[]
    }
  },
methods:{

  formatter (row) {
    const zoneDate = new Date(row.createtime).toJSON()
    const date = new Date(+new Date(zoneDate) + 8 * 3600 * 1000).toLocaleDateString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    return date
  },
  open2() {

    this.$message({
      message: '提交成功！',
      type: 'success'
    });
  },
  back(){
    this.$router.go(-1);
  },
  submit(){
    let data = this.$route.query.course;
    this.course = JSON.parse(data);
    this.userid = sessionStorage.getItem("userId");

    data = {'id':0,'userid':this.userid,'courseid':this.course.id,'price':this.course.price,'createtime':'',
      'paytime':'','dealnumber':this.order.dealnumber,'audit':0}
    var url = '/dingdan';
    var postCfg = {
      headers: {'Content-Type': 'application/json;charset=UTF-8'}
    };
    this.$axios.put(url,JSON.stringify(data),postCfg)
      .then( (res)=>{
         console.log(res.data.msg);
        }
      ).catch(function (error) {
      console.log(error);
    })


  }


},
  created() {

   this.user.username = sessionStorage.getItem("username");
   this.user.phone = sessionStorage.getItem("userPhone");

    let data = this.$route.query.course;
    this.course = JSON.parse(data);
    this.userid = sessionStorage.getItem("userId");

     data = {'id':0,'userid':this.userid,'courseid':this.course.id,'price':this.course.price,'createtime':'',
      'paytime':'','dealnumber':0,'audit':0}
    var url = '/dingdan';
    var postCfg = {
      headers: {'Content-Type': 'application/json;charset=UTF-8'}
    };
    this.$axios.post(url,JSON.stringify(data),postCfg)
      .then( (res)=>{
          this.order = res.data.data;
        }
      ).catch(function (error) {
      console.log(error);
    })

    console.log(this.order.dealnumber);


  }
}
</script>

<style scoped>
.order{
  position: relative;
  height: 619px;
  width: 70%;
  left: 15%;
  /*border-style: solid;*/
  /*border-color: #ffcc00 ;*/
}
.el-breadcrumb{
  line-height: 2;
}
.order2{
  position: relative;
  height: 200px;
  width: 70%;
  left: 15%;
  /*border-style: solid;*/
  /*border-color: #ffcc00 ;*/
  text-align: right
}
.pay{
  float: right;
  width: 230px;
  height: 50px;
  background-color: rgb(255,80,80);
  text-align: center;
  line-height: 50px;
  color: white;
  font-weight:bolder;
  cursor:pointer;
}
.return{
  float: right;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: cornflowerblue;
  font-weight:bolder;
  cursor:pointer;
}
</style>
